<template>
  <div>
    <div style="background: #fff">
      <div class="Mian">
        <el-tabs v-model="activeName" class="demo-tabs padlr320" @tab-click="handleClick" stretch="true">
          <el-tab-pane v-for="(item, index) in productTabs" :key="item.type_id" :label="item.text" :name="item.text">
            <div class="product-box">
              <div class="product-title">{{ item.text }}</div>
              <div class="product-content" v-html="item.content"></div>
            </div>
            <div class="product-link" v-if="tableA.length != 0">
              <div>
                <a href="javascript:;" v-for="(item, index) in tableA" :key="item.id">{{ item.title }}</a>
                <!-- <a href="javascript:;">一对一解答法律难题</a>
                <a href="javascript:;">一对一解答法律难题</a>
                <a href="javascript:;">服务成果线上同步存单</a> -->
              </div>
              <!-- <div>
                <a href="">专业律师把脉全程风险</a>
                <a href="">服务成果线上同步存单</a>
              </div> -->
              <!-- <div>
                使用说明:一次性完成线下咨询，不支持分次使用;收费标准:199元/30分钟，咨询时长自由选择
              </div> -->
            </div>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import serviceApi from "@/api/modules/lawyer.js"

const activeName = ref("产品描述");
const productTabs = reactive([

]);
const id = ref(2)
const service_id = ref(3)
const tableA = reactive([])
const getServiceDescribe = async () => {
  let res = await serviceApi.getServiceDescribe(service_id.value)
  let res1 = await serviceApi.getService(id.value)
  if (res.code === 1) {
    res1.data.text_tabs.forEach((item) => {
      productTabs.push({
        ...item,
        content: res.data.content
      })
    })
  }
}
const getServiceLabel = async () => {
  let res = await serviceApi.getServiceLabel(service_id.value)
  if (res.code === 1) {
    let newArr = Object.values(res.data)
    tableA.push(...newArr)
    // console.log(tableA);
    // console.log(res);
  }

}
onMounted(() => {
  // getService()
  getServiceDescribe()
  getServiceLabel()
})
</script>

<style lang="scss" scoped>
.Mian {
  width: 1920px !important;
  margin: 0 auto;
  // height: 100%;
}

.demo-tabs {
  .product-link {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 50px;

    div {
      margin: 10px 0;
    }

    a {
      color: #004cd1;
      text-decoration: none;
      margin: 0px 10px;
    }
  }

  :deep(.el-tabs__item.is-active) {
    color: #004cd1 !important;
  }

  :deep(.el-tabs__active-bar) {
    height: 6px;
    background-color: #004cd1;
  }

  :deep(.el-tabs__item) {
    height: 64px;
  }

  .product-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .product-title {
      width: 112px;
      height: 50px;
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      text-align: center;
      color: #202020;
      line-height: 50px;
      margin: 20px 0 20px 0;
    }

    .product-content {
      width: 1280px;
      // height: 56px;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      // text-align: center;
      color: #202020;
      line-height: 28px;
      margin-bottom: 20px;
    }
  }
}
</style>
